<template>
  <div id="app">
    <br/>
    <gocaptcha-click
        :data="clickData"
        :events="clickEvents"
        :config="clickConfigData"
        ref="clickRef"
    />
    <br/>
    <gocaptcha-slide
        :data="slideData"
        :events="slideEvents"
        :config="slideConfigData"
        ref="slideRef"
    />
    <br/>
    <gocaptcha-slide-region
        :data="slideRegionData"
        :events="slideRegionEvents"
        :config="slideRegionConfigData"
        ref="slideRegionRef"
    />
    <br/>
    <gocaptcha-rotate
        :data="rotateData"
        :events="rotateEvents"
        :config="rotateConfigData"
        ref="rotateRef"
    />
    <br/>
    <br/>
    <gocaptcha-button
        @click-event="printHello"
    />
    <br/>
    <br/>
    <br/>
  </div>
</template>

<script setup lang="ts">
import {nextTick, reactive, ref} from "vue";

const clickImage = ""
const clickImage2 = ""
const clickThumb = ""

const slideImage = ""
const slideThumbImage = ""

const rotateImage = ""
const rotateThumb = ""

const printHello = () => {
  console.log(">>>>> hello")
}

const clickData = reactive({
  image: clickImage,
  thumb: clickThumb,
})

const clickEvents = {
  click(x: number, y: number): void {
    console.log("click >>>>>>>", x, y)
  },
  confirm(dots: any, clear: Function): void {
    console.log("dots >>>>>>>", dots)

    setTimeout(() => {
      clear()
    }, 100)
  },
  refresh(): void {
    console.log("refresh >>>>>>>")
    clickData.image = clickImage2
  },
  close(): void {
    console.log("close >>>>>>>")
  },
}

const clickConfigData = reactive({
  width: 300,
  height: 220,
})
// setTimeout(() => {
//   configData.width = 500;
//   configData.height = 500;
// }, 2000)

const clickRef = ref(null)
nextTick(() => {
  // setTimeout(() => {
  //   // clickRef.value.reset()
  //   clickRef.value.clear()
  //   // clickRef.value.refresh()
  //   // clickRef.value.close()
  // }, 5000)
})

////////////////////////////////
const slideData = reactive({
  thumbX: 20,
  thumbY: 20,
  thumbWidth: 80,
  thumbHeight: 80,
  image: slideImage,
  thumb: slideThumbImage,
})
const slideEvents = {
  move(x: number, y: number): void {
    console.log("move >>>>>>>", x, y)
  },
  refresh(): void {
    console.log("refresh >>>>>>>")
    slideData.thumbX = 40
    slideData.thumbY = 60
    slideData.image = clickImage2
  },
  confirm(point: any, reset: Function): void {
    console.log("point >>>>>>>", point)

    setTimeout(() => {
      reset()
    }, 1000)
  },
  close(): void {
    console.log("close >>>>>>>")
  }
}

const slideConfigData = reactive({
  width: 300,
  height: 220,
  scope: true,
})
// setTimeout(() => {
//   slideConfigData.width = 500;
//   slideConfigData.height = 500;
// }, 2000)

const slideRef = ref(null)
nextTick(() => {
  // setTimeout(() => {
  //   // slideRef.value.reset()
  //   slideRef.value.clear()
  //   // slideRef.value.refresh()
  //   // slideRef.value.close()
  // }, 5000)
})

/////////////////////////////////
const slideRegionData = reactive({
  thumbX: 20,
  thumbY: 20,
  thumbWidth: 80,
  thumbHeight: 80,
  image: slideImage,
  thumb: slideThumbImage,
})
const slideRegionEvents = {
  move(x: number, y: number): void {
    console.log("move >>>>>>>", x, y)
  },
  refresh(): void {
    console.log("refresh >>>>>>>")

    slideRegionData.thumbX = 40
    slideRegionData.thumbY = 60
    slideRegionData.image = clickImage2
  },
  confirm(point: any, reset: Function): void {
    console.log("point >>>>>>>", point)

    setTimeout(() => {
      reset()
    }, 1000)
  },
  close(): void {
    console.log("close >>>>>>>")
  }
}


const slideRegionConfigData = reactive({
  width: 300,
  height: 220,
  scope: true,
})
// setTimeout(() => {
//   slideRegionConfigData.width = 500;
//   slideRegionConfigData.height = 500;
// }, 2000)

const slideRegionRef = ref(null)
nextTick(() => {
  setTimeout(() => {
    // slideRegionRef.value.reset()
    // slideRegionRef.value.clear()
    // slideRegionRef.value.refresh()
    // slideRegionRef.value.close()
  }, 5000)
})


/////////////////////////////////

const rotateData = reactive({
  image: rotateImage,
  thumb: rotateThumb,
  thumbSize: 195,
})
const rotateEvents = {
  rotate(angle: number): void {
    console.log("rotate >>>>>>>", angle)
  },
  refresh(): void {
    console.log("refresh >>>>>>>")
    rotateData.image = clickImage2
  },
  confirm(angle: any, reset: Function): void {
    console.log("angle >>>>>>>", angle)

    setTimeout(() => {
      reset()
    }, 1000)
  },
  close(): void {
    console.log("close >>>>>>>")
  }
}


const rotateConfigData = reactive({
  width: 300,
  height: 220,
  scope: true,
})
// setTimeout(() => {
//   rotateConfigData.width = 500;
//   rotateConfigData.height = 500;
// }, 2000)

const rotateRef = ref(null)
nextTick(() => {
  // setTimeout(() => {
  //   // rotateRef.value.reset()
  //   rotateRef.value.clear()
  //   // rotateRef.value.refresh()
  //   // rotateRef.value.close()
  // }, 5000)
})

</script>

<style>

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  color: #3C3C3C;
  background: #EBF3FB;
}

#app{
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>